<template>
    <el-drawer
      title="日志详情"
      size="400px"
      v-model="drawerVisible"
    >
        <div  style="padding:12px 0 12px 30px">
          <el-form label-width="120px" class="detail">
            <!-- 基本信息 -->
            <el-form-item label="表名">
              <el-tag type="info" effect="plain" size="mini">
                {{ logsObj.table }}
              </el-tag>
            </el-form-item>
            <el-form-item label="时间">
                <div>{{ logsObj.created_at }}</div>
            </el-form-item>
            <el-form-item label="地址">
                <div>{{ logsObj.path }}</div>
            </el-form-item>
            <el-form-item label="描述">
                <div>{{ logsObj.desc }}</div>
            </el-form-item>
            <div>
                <el-divider>变化</el-divider>
            </div>
            <div>
                <JsonViewer :value="logsObj.remark" expanded  sort/>
            </div>
            <div>
                <el-divider>操作人</el-divider>
            </div>
            <div>
                <el-form-item label="ID">
                    <div>{{ logsObj.user.id }}</div>
                </el-form-item>
                <el-form-item label="用户">
                    <div>{{ logsObj.user.name }}</div>
                </el-form-item>
                <el-form-item label="邮箱">
                    <div>{{ logsObj.user.email }}</div>
                </el-form-item>
            </div>
          </el-form>
        </div>
    </el-drawer>
  </template>
  
  <script setup lang="ts">
  import { ref,onMounted,defineProps,watch,defineExpose } from 'vue';
  import { JsonViewer } from "vue3-json-viewer";
  import "vue3-json-viewer/dist/index.css";
  const props = defineProps(['rowObj'])
  const drawerVisible = ref<boolean>(false);
  const logsObj = ref(null);  
  const openDrawer = ()=>{
    drawerVisible.value = true
  }
  const data = ref<{
    id: number | null;
    description: string;
    created: string;
    subject_type: string;
    subject_id: string;
    log_name: string;
    changes: Record<string, any>;
    causer_id: number | null;
    causer: {
      id: number;
      name: string;
      email: string;
    };
  }>({
    id: null,
    description: '',
    created: '',
    subject_type: '',
    subject_id: '',
    log_name: '',
    changes: {},
    causer_id: null,
    causer: {
      id: 0,
      name: '',
      email: '',
    },
  });
    watch(props,(newVal,oldVal)=>{
		logsObj.value = newVal.rowObj
      
	})

    defineExpose({
        openDrawer
    })
  </script>
  
  <style scoped>
  :deep(.jv-container .jv-code.boxed) {
  max-height: 420px;
}

:deep(.jv-container .jv-code) {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}
  </style>
  